<template>
  <view class="customer-viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="
          () => {
            activeIndex = index
            item.isRender = true
          }
        "
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 50 + '%' }"></view>
    </view>

    <!-- 滑动容器 -->
    <swiper
      class="swiper"
      :current="activeIndex"
      @change="
        (event) => {
          activeIndex = event.detail.current
          orderTabs[activeIndex].isRender = true
        }
      "
    >
      <!-- 滑动项 -->
      <swiper-item v-for="item in orderTabs" :key="item.title">
        <QwCustomerList v-if="item.isRender" v-show="item.entryType === '1'" />
        <SysCustomerList v-if="item.isRender" v-show="item.entryType === '2'" />
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import QwCustomerList from './components/QwCustomerList.vue'
import SysCustomerList from './components/SysCustomerList.vue'

// 获取页面参数
const query = defineProps<{
  type: string
}>()

// tabs 数据
const orderTabs = ref([
  { entryType: '1', title: '企微客户', isRender: false },
  { entryType: '2', title: '企业客户', isRender: false },
])

// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.entryType === '1'))
// 默认渲染容器
orderTabs.value[activeIndex.value].isRender = true
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.customer-viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 40rpx;
  //margin: 0 10rpx;
  background-color: #3775cb;
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #ffffff;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 1rpx;
    padding: 0 50rpx;
    background-color: #ffffff;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #ffffff;
}
</style>
